<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<div class="top"><headerTop></headerTop></div>
		<!-- 中间内容区域 -->
		<div class="center">
			<home v-if="index == 1"></home>
			<recommend v-if="index == 2"></recommend>
			<research v-if="index == 3"></research>
		</div>
		<!-- 底部信息栏 -->
		<div class="bottom"><footerBot></footerBot></div>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {},
	computed: {
		index() {
			return this.$store.state.showIndex;
		}
	}
};
</script>

<style>
.content {
	width: 100vw;
	height: 100vh;
}
.top {
	height: 61px;
}

.bottom {
	width: 100vw;
	height: 5vh;
	line-height: 5vh;
	/* 将标签永远定位到屏幕的最下边 */
	position: fixed;
	bottom: 0px;
	left: 0px;
}

.center {
	width: 100vw;
	height: calc(95vh - 61px);
}
</style>
